<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-group compact style="display:flex;">
				<a-select
					v-if="isShowSelect"
					v-model="selectValue"
					class="heade-left-box"
					@change="relaodRole"
					:disabled="isDisabledSelect"
				>
					<a-select-option
						v-for="item in selectOptions"
						:value="item.value"
						:key="item.value"
					>
						{{ item.label }}
					</a-select-option>
				</a-select>
				<a-input-search
					:class="{'heade-right-box':isShowSelect}"
					:placeholder="placeText"
					v-model.trim="searchValue"
					@search="relaodRole"
				/>
			</a-input-group>
		</div>
		<div class="content-wrapper">
			<scrollList
				ref="roleList"
				panel="Role"
				command="roleList"
				:firstLoadSearch="false"
				:showOtherProp="true"
				iconType="cap-icon-alternative-post"
				:otherProps="['typeName']"
			/>
		</div>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';
export default {
	name: 'Role',
	inject: ['app'],
	components: {
		scrollList
	},
	data() {
		return {
			isShowSelect: true,
			isDisabledSelect: false,
			selectOptions: [
				{label: this.$i18n('selectPeople.allRole'), value: 'Account,Department'},
				{label: this.$i18n('selectPeople.accountRole.title'), value: 'Account'},
				{label: this.$i18n('selectPeople.departmentRole.title'), value: 'Department'}
			],
			placeText: this.$i18n('selectPeople.input',this.$i18n('org.role.label')),
			selectValue: 'Account,Department',
			searchValue: ''
		};
	},
	activated() {
		const { switchAfterUnit } = this.app();
		const accountId = switchAfterUnit.id;
		if (this.$isChangeAccount(this, accountId)) {
			// 清空搜索
			this.searchValue = '';
			// 调用修改单位
			this.onChangeAccount({id: accountId});
		}
	},
	methods: {
		onChangeAccount(data) {
			const {showRoleType,rootAccountId} = this.app().orgSelect;
			// 是否显示下拉
			this.isShowSelect = rootAccountId !== data.id;
			// 下拉默认值
			if (!this.isShowSelect) {
				this.selectValue = showRoleType;
			} else if (showRoleType !== null && showRoleType !== '' && showRoleType !== 'Account,Department') {
				this.selectValue = showRoleType;
				this.isDisabledSelect = true;
			} else {
				this.selectValue = 'Account,Department';
			}
			// 标记单位
			this.$changeAccount(this, data.id);
			this.relaodRole();
		},
		relaodRole() {
			const { id: accountId } = this.app().switchAfterUnit;
			this.$refs.roleList.initProps();
			this.$refs.roleList.search({
				showRoleType: this.selectValue,
				accountId: accountId,
				keyword: this.searchValue
			});
		}
	}
};
</script>

<style scoped lang="scss">
</style>
